<template>
  <el-dialog v-model="visible" width="700px">
    <Title title="教师个人信息" />
    <div class="dialog-container">
    <div v-if="teacherData" class="teacher-detail">
      <el-descriptions :column="2" border label-width="100" class="fixed-width-descriptions">
        <el-descriptions-item label="姓名">
          {{ teacherData.user?.nickName || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="所属学院">
          {{ teacherData.user?.dept?.deptName || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="手机号">
          {{ teacherData.user.phonenumber || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="邮箱">
          {{ teacherData.email || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="研究方向">
          {{ teacherData.majorField || '-' }}
        </el-descriptions-item>
      </el-descriptions>
      <div class="info-section">
        <div class="section-title">
          <el-icon><Document /></el-icon>
          <span>个人简介</span>
        </div>
        <div class="section-content">
          {{ teacherData.summary || '暂无个人简介' }}
        </div>
      </div>
    </div>
    <div v-else class="loading-container">
      <el-empty description="加载中..." />
    </div>
    </div>
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import Title from '@/components/Title/index.vue'

const visible = ref(false)
const teacherData = ref(null)

// 打开弹窗
const openDialog = (teacher) => {
  teacherData.value = teacher
  visible.value = true
}

// 关闭弹窗
const handleClose = () => {
  visible.value = false
  teacherData.value = null
}

// 暴露方法
defineExpose({
  openDialog
})
</script>

<style scoped>
.teacher-detail {
  padding: 10px 0;
}

.profile-content {
  line-height: 1.6;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.profile-content::-webkit-scrollbar {
  width: 4px;
}

.profile-content::-webkit-scrollbar-thumb {
  background-color: #c0c4cc;
  border-radius: 2px;
}
.info-section {
  margin-top: 20px;
  padding: 16px;
  background-color: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--el-color-primary);
}

.section-title .el-icon {
  font-size: 18px;
  color: var(--el-color-primary);
}
.dialog-footer {
  text-align: center;
}
/* 让 descriptions 两列等宽，长内容自动断行 */
.fixed-width-descriptions :deep(.el-descriptions__table) {
  width: 100%;
  table-layout: fixed;
}
.fixed-width-descriptions :deep(.el-descriptions__label),
.fixed-width-descriptions :deep(.el-descriptions__content) {
  word-break: break-word;
  white-space: normal;
}
.loading-container {
  padding: 40px 0;
  text-align: center;
}
</style>
